<template>
  <div>
    <div v-for="(refundDetail, index) in refundData" :key="index">
      <el-row :gutter="15">
        <el-col :span="12" style="height: auto">
          <RefundProgress :refundDetail="refundDetail"></RefundProgress>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <RefundStart :refundDetail="refundDetail"></RefundStart>
        </el-col>
      </el-row>
      <el-row :gutter="15" >
        <el-col :span="12">
          <RefundAppeal v-if="refundDetail.refundScheme === 2" :refundDetail="refundDetail"></RefundAppeal>
        </el-col>
        <el-col :span="12">
          <RefundArbitration v-if="orderState == 7 && refundDetail.refundScheme === 2 || orderState == 8 && refundDetail.refundScheme === 2" :refundDetail="refundDetail"></RefundArbitration>
        </el-col>
        <el-col :span="12">
          <RefundInformation v-if="orderState == 7 || orderState == 8" :refundDetail="refundDetail"></RefundInformation>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import RefundProgress from '@/views/fhb/myOrders/components/detail/RefundProgress'
import RefundStart from '@/views/fhb/myOrders/components/detail/RefundStart'
import RefundAppeal from '@/views/fhb/myOrders/components/detail/RefundAppeal'
import RefundArbitration from '@/views/fhb/myOrders/components/detail/RefundArbitration'
import RefundInformation from '@/views/fhb/myOrders/components/detail/RefundInformation'
export default {
  name: 'refund',
  components: {
    RefundProgress,
    RefundStart,
    RefundAppeal,
    RefundArbitration,
    RefundInformation
  },
  props: {
    refundData: {
      type: Array,
      required: true
    },
    orderState: {
      type: [String, Number],
      required: true
    }
  }
}
</script>

<style scoped>

</style>
